<template>
	<div class="home-main">
		<div class="box-top">
			<div style="width: 50%">
				<h5 style="margin-left:10px;border-left:5px solid #FF8100;padding-left:10px">污水分类占比</h5>
				<div id="pieBox" ></div>
			</div>
			<div style="width: 50%">
				<h5 style="margin:10px;border-left:5px solid #FF8100;padding-left:10px">污水排放数据</h5>
				<div id="container"></div>
			</div>
		</div>
			<div style="height: 400px;margin-top:50px">
				<h5 style="margin:10px;border-left:5px solid #FF8100;padding-left:10px">污水分类数据</h5>
			<div id="columnBox"></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pieData: [
				{ type: "工业废水", value: 88 },
				{ type: "生活污水", value: 110 },
				{ type: "商业污水", value: 67 },
				{ type: "表面径流", value: 80 },
			],
			LineData: [
				{ type: "工业废水", value: 88 },
				{ type: "生活污水", value: 110 },
				{ type: "商业污水", value: 67 },
				{ type: "表面径流", value: 80 },
			],
		};
	},
	mounted() {
		this.lineEcharts();
		this.pieEcharts();
		this.columnEcharts();
	},
	methods: {
		pieEcharts() {
			let that = this;
			const piePlot = new this.$g2plot.Pie("pieBox", {
				appendPadding: 10,
				data:that.pieData,
				angleField: "value",
				colorField: "type",
				radius: 1,
				innerRadius: 0.6,
				label: {
					type: "inner",
					offset: "-50%",
					content: "{value}",
					style: {
						textAlign: "center",
						fontSize: 14,
					},
				},
				interactions: [
					{ type: "element-selected" },
					{ type: "element-active" },
				],
				statistic: {
					title: false,
					content: {
						style: {
							whiteSpace: "pre-wrap",
							overflow: "hidden",
							textOverflow: "ellipsis",
						},
						formatter: (value) =>{
							return '污水排水'
						},
					},
				},
			});

			piePlot.render();
		},
		columnEcharts() {
			let that = this;
			const columnPlot = new this.$g2plot.Column("columnBox", {
				data: that.pieData,
				xField: "type",
				yField: "value",
				columnWidthRatio: 0.5,
				color: "#5B8FF9",
				meta: {
					type: {
						alias: "类别",
					},
					value: {
						alias: "数量",
					},
				},
			});

			columnPlot.render();
		},
		lineEcharts() {
			let that = this;
			const line = new this.$g2plot.Line("container", {
				data: that.LineData,
				xField: "type",
				yField: "value",
				padding: "auto",
				xAxis: {
					tickCount: 5,
					tickInterval: 1,
				},
				meta: {
					value: {
						alias: "数量",
					},
				},
				label: {},
				point: {
					size: 5,
					shape: "diamond",
					style: {
						fill: "white",
						stroke: "#5B8FF9",
						lineWidth: 2,
					},
				},
				tooltip: { showMarkers: false },
				state: {
					active: {
						style: {
							shadowColor: "yellow",
							shadowBlur: 4,
							stroke: "transparent",
							fill: "red",
						},
					},
				},
				theme: {
					geometries: {
						point: {
							// 设置 point(geometry)-diamond(shape) 样式
							diamond: {
								active: {
									style: {
										shadowColor: "#FCEBB9",
										shadowBlur: 2,
										stroke: "#F6BD16",
									},
								},
							},
						},
					},
				},
				interactions: [{ type: "marker-active" }],
			});
			line.render();
		},
	},
};
</script>

<style lang='scss' scoped>
.home-main {
	.box-top {
		width: 100%;
		height: 400px;
		margin-top: 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}
</style>